import React, { useState, useMemo, useCallback } from 'react'

export default function UseMemo() {

    let [num, setNum] = useState(10);
    let [price, setPrice] = useState(10);

    let [n, setN] = useState(999);

    // let total= function(){
    //     console.log("小计在发生改变");
    //     return  num*price;
    // }

    let total = useMemo(() => {
        console.log("小计在发生改变");
        return num * price;

    }, [num, price])

    let sum = useCallback(
        () => {
            console.log("abc");
           return  num*price;
        },
        [num,price],
    )



    return (
        <div>
            UseMemo
            <h3>
                数量{num}  价格 {price}  小计{num * price}

            </h3>
            <h3>小计{total} </h3>
            <h3>求和{sum()}</h3>
            <button onClick={() => {
                setNum(num + 1);
            }}>修改小计</button>
            <hr></hr>
            <h3>n的值为{n}</h3>
            <button onClick={() => {
                setN(n + 1);
            }}>修改n</button>


        </div>
    )
}
